@extends('admin.layouts.master')

@section('content')

<div class="row aw-list">
	<div class="col-lg-12">
		<section class="row form-inline aw-list-head" v-for="(list, key)  in lists">
			<div class="col-sm-4">
				<div class="aw-head-add">
					<a class="btn btn-gules" href="javascript:;" v-on:click="List_Info_Layer('',list.id,list.name)"><i class="icon-plus"></i> 添加@{{list.name}}</a>
				</div>
			</div>
		</section>
	</div>
	<div class="col-md-12">
		<section class="panel aw-content" v-for="(list, key)  in lists">
			<header class="panel-heading">@{{list.name}}列表 - <h5 style="display:inline-block;">@{{list.desc}}</h5></header>
			<table class="table table-striped dataTable table-hover">
				<thead>
					<tr>
						<th class="aw-text-center">ID</th>
						<th>排序ID</th>
						<th>分类名称</th>
						<th>状态</th>
						<th>备注</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(li, key)  in list.nav_li">
						<td class="aw-text-center">@{{li.id}}</td>
						<td><input type="text" class="form-control Js-sort-focusout" :data-name_type="list.name" :data-id="li.id" :data-sort="li.sort" :value="li.sort" style="height:22px;width:40px;padding:0px 5px;text-align: center;display:inline-block;"></td>
						<td>@{{li.name}}</td>
						<td>@{{li.status_text}}</td>
						<td>@{{li.desc}}</td>
						<td>
							<button class="btn btn-gules btn-xs" v-on:click="List_Status(li.id,2,'禁用',list.name)" v-if="li.status==1">
								<i class="icon-eye-close"></i> 禁用
							</button>
							<button class="btn btn-green btn-xs" v-on:click="List_Status(li.id,1,'启用',list.name)" v-if="li.status==2">
								<i class="icon-eye-open"></i> 启用
							</button>
							
							<button class="btn btn-green btn-xs" v-on:click="List_Info_Layer(li.id,key,list.name)">
								<i class="icon-pencil"></i> 编辑
							</button>
							
							<a class="btn btn-violet btn-xs" :href="'/admin/admin/root?page_id=16&id='+li.id" v-if="list.id==3">
								<i class="icon-key"></i> 权限
							</a>
							
							
							<button class="btn btn-gules btn-xs aw-hide" v-on:click="List_Status(li.id,-1,'删除',list.name)">
								<i class="icon-trash"></i> 删除
							</button>
							
						</td>
					</tr>
				</tbody>
			</table>
			<div class="aw-text-center aw-list-null" v-if="lists.length==0">暂无数据</div>
			<div class="col-md-12 aw-hide Js-layer-nav-info">
				<div class="aw-layer-edit-icon aw-layer-edit-station">
					<div class="form-group">
						<label class="control-label">分类名称：</label>
						<div class="">
							<input class="form-control" type="text" placeholder="请输入分类名称" id="name" name="name" v-model="form.name" v-bind:value="form.name">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label">备注：</label>
						<div class="">
							<input class="form-control" type="text" placeholder="请输入备注内容" id="desc" name="desc" v-model="form.desc" v-bind:value="form.desc">
						</div>
					</div>
					<div class="col-md-12 aw-content-btn">
						<a class="btn btn-gules Js-layer-edit-project-btn" href="javascript:;" v-on:click="List_Info_Save(form.id)">添加</a>
						<a class="btn btn-gray Js-layer-colse" href="javascript:;">取消</a>
					</div>
				</div>
			</div>
		</section>
	</div>
</div>

@section('pagejs')
@parent
<style>
.aw-td-eee td{background:#eee !important;}
</style>
<script type="text/javascript" src="/admin/js/vue-page.js"></script>
<script type="text/javascript" src="/admin/js/page.js"></script>
<script type="text/javascript">
var MJS_URLArry=URLArry;
//ajax参数
function AD_List(status){
	MJS_URLArry.status=status;
	return AD_list={
		api:'/adminapi/class/class-list',
		form_data:MJS_URLArry,
		tips:false,
	}
}
var AD_list=AD_List(0);
//默认数据
function VD_Nav_Form(){
	var VD_Nav_Form={id:'',id_category:0,depth:1,name:'',icon:'',desc:''}
	return VD_Nav_Form;
}
var Ajax_Vue_Fun=function(vue_data){
	console.log('vue_data')
	console.log(vue_data)
	var Data_Vue=ajax_data_res(vue_data)
	Data_Vue.form=VD_Nav_Form();//添加默认数据
	console.log(123456)
	console.log(Data_Vue)
	vm=new Vue({
		el:'#Vue-Body',
		data:Data_Vue,
		methods:{
			Call_back:function(page){
				Vm_Call_back_Page(page)
			},List_Sort:function(id,sort,name_type){
				console.warn('Vue-function:刷新排序事件 id='+id);
				var ajax_data={
					api:'/adminapi/class/class-sort',
					form_data:{id:id,sort:sort},
					tips:name_type+'排序成功',
				}
				postData(ajax_data)
				//刷新数据
				Vm_List_Get_Data(this.page_this)
			},List_Status:function(id,status,tips,name_type){
				var AD_status={
					api:'/adminapi/class/class-status',
					form_data:{id:id,status:status},
					tips:tips+name_type+'成功',
					msg:'是否'+tips+'该'+name_type+'？',
				}
				Vm_List_Status(AD_status)
			},List_Info_Layer:function(id,id_category,name_type){
				vm.form=VD_Nav_Form();
				console.warn('Vue-function:添加/编辑项目弹框事件 id='+name_type);
				var title='添加';
				if(id){
					title='编辑'
					$('.Js-layer-edit-project-btn').html('保存')
					var AD_info={
						api:'/adminapi/class/class-info',
						form_data:{id:id},
						tips:false,
					}
					getData(AD_info,function(data_nav_info){
						console.log('data_nav_list')
						console.log(data_nav_info)
						vm.form=data_nav_info;
						Layer_Open()
						vm.form.name_type=name_type;
					})
				}else{
					this.form=VD_Nav_Form();
					if(id_category){
						this.form.id_category=id_category;
						this.form.depth=2;
					}
					Layer_Open()
					this.form.name_type=name_type;
				}
				function Layer_Open(){
					layer.open({
						type:1,
						title:title+name_type,
						//closeBtn: 0, //不显示关闭按钮
						area: ['400px','310px'], //宽高
						content:$('.Js-layer-nav-info')
					});
				}
			},List_Info_Save:function(id){
				console.warn('Vue-function:添加/编辑项目事件 id='+id);
				console.log(this.form)
				var data_tips='添加';
				if(id){
					data_tips='编辑';
				}
				if(this.form.depth==1){
					this.form.id_category=0;
				}
				console.log('this.list')
				console.log(this.list)
				var ajax_data_icon={
					api:'/adminapi/class/class-save',
					form_data:this.form,
					tips:data_tips+this.form.name_type+'成功',
				}
				postData(ajax_data_icon,function(){
					setTimeout(function(){
						layer.closeAll();
						Vm_List_Get_Data(vm.page_this)
					},3000)
				});
			},Console_Log:function(){
				console.warn('Vue-function:打印vue事件');
				console.log(this)
				console.log(this.lists)
			}
		}
	})
	console.log(vm)
	$(document).on('focusout','.Js-sort-focusout',function(){
		var This=$(this);
		var id=This.attr('data-id');
		var sort=This.attr('data-sort');
		var name_type=This.attr('data-name_type');
		var sort_val=This.val();
		console.log(sort)
		console.log(sort_val)
		if(sort==sort_val){
			console.log(sort_val)
			return;
		}
		vm.List_Sort(id,sort_val,name_type)
	})
}
getData(AD_list,Ajax_Vue_Fun)
</script>

@endsection

@endsection